<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
		 viewport-fit=cover "/>
    <title>肌肤之钥光耀会</title>
    <link href=" style.ac91cd7f.css " rel=" stylesheet
		 ">
</head>
<body>
<div class=" swiper-container ">
    <div class=" swiper-wrapper swiper-slide-next"><!-- 第一屏-->
		<div class="swiper-slide ">
			<div class="kv "></div>
			<ul class="tips clearfix ">
				<li>
					<div class="text-content ">
						<h1>入会资格</h1>
						<div class="intro ">
							<img src="static/images/content1.png">
						</div>
					</div>
				</li>
				<li>
					<div class="text-content ">
						<h1>入会礼遇</h1>
						<div class="intro ">
							<img src="static/images/content2.png">
						</div>
					</div>
				</li>
				<li>
					<div class="text-content ">
						<h1>生日礼遇</h1>
						<div class="intro ">
							<img src="static/images/content3.png">
						</div>
					</div>
				</li>
				<li>
					<div class="text-content ">
						<h1>积分及兑礼</h1>
						<div class="intro ">
							<img src="static/images/content4.png">
						</div>
					</div>
				</li>
			</ul>
			<div class="more ">
				<div class="arrow "></div>
			</div>
		</div>
		<!-- 第二屏 -->
		<div class="swiper-slide ">
			<div class="slide-content">
				<div class="title " id="title "><a class="active " href="javascript:void(0) ">银钻卡</a><a href="javascript:void(0) ">金钻卡</a><a
					 href="javascript:void(0) ">白金钻卡</a><a href="javascript:void(0) ">黑钻卡</a></div>
				<div class="member-content ">
					<div class="banner ">
						<img src="static/images/banner-silver2.png " width="100% " alt="banner " title="banner ">
						<div class='banner-content'>
							<h3>会员资格取得</h3>
							<div class="banner-word">在CPB肌肤之钥官方渠道(百货专柜、直营店或官方商城)购买任意产品，即可成为银钻卡会员，会籍终身有效。</div>
						</div>
					</div>
					<div class="line "><img src=" "
						 alt="line " title="line "></div>
					<div class="text-content ">
						<h1>积分累计规则</h1>
						<div>消费1元积1分，累计满18,000起，可参与积分兑换。积分每年年底到期清零。</div>
						<h1>生日礼遇</h1>
						<div>生日月首单购买享双倍积分，还可到店领取我们为您精心准备的光采沁生礼。</div>
						<div class="firstTip">*银钻卡会员生日月前1年任意消费，即享生日礼遇。</div>
						<div>*新会员入会当月无生日双倍积分礼遇。</div>
						<div>*会员制度如有修订、更新，以品牌公布的修订后内容为准。</div>
					</div>
				</div>
				<div class="member-content hide ">
					<div class="banner ">
						<img src="static/images/banner-golden2.png " width="100% " alt="banner " title="banner ">
						<div class='banner-content'>
							<h3>会员资格取得</h3>
							<div class="banner-word">在一个自然年内，累计消费金额满10,000元，可升级为金钻卡会员。会籍身份自升级之日起至次年年底有效。</div>
						</div>
					</div>
					<div class="line "><img src=" "
						 alt="line " title="line "></div>
					<div class="text-content ">
						<h1>升级礼遇</h1>
						<div>额外获赠1,000积分。</div>
						<h1>积分累计规则</h1>
						<div>消费1元积1.1分，累计满18,000起，可参与积分兑换。积分每年年底到期清零。</div>
						<h1>生日礼遇</h1>
						<div>生日当月首单购买享双倍积分，还可以到店领取我们为您精心准备的沁润耀生礼。</div>
						<div class="firstTip">*新会员入会当月无生日双倍积分礼遇。</div>
						<div>*会员制度如有修订、更新，以品牌公布的修订后内容为准。</div>
					</div>
				</div>
				<div class="member-content hide ">
					<div class="banner ">
						<img src="static/images/banner-white2.png " width="100% " alt="banner " title="banner ">
						<div class='banner-content'>
							<h3>会员资格取得</h3>
							<div class="banner-word">在一个自然年内，累计消费金额满20,000元，可升级为白金卡会员。会籍身份自升级之日起至次年年底有效。</div>
						</div>
					</div>
					<div class="line "><img src=" "
						 alt="line " title="line "></div>
					<div class="text-content ">
						<h1>升级礼遇</h1>
						<div>额外获赠2,000积分及升级尊享礼。</div>
						<h1>积分累计规则</h1>
						<div>消费1元积1.2分，累计满18,000起，可参与积分兑换。积分每年年底到期清零。</div>
						<h1>生日礼遇</h1>
						<div>生日当月首单购买享双倍积分，还可到店领取我们为您精心准备的尊宠焕耀礼。</div>
						<div class="firstTip">*新会员入会当月无生日双倍积分礼遇。</div>
						<div>*会员制度如有修订、更新，以品牌公布的修订后内容为准。</div>
					</div>
				</div>
				<div class="member-content hide ">
					<div class="banner ">
						<img src="static/images/banner-black2.png " width="100% " alt="banner " title="banner ">
						<div class='banner-content'>
							<h3>会员资格取得</h3>
							<div class="banner-word">在一个自然年内，累计消费金额满48,000元，可升级为黑钻卡会员。会籍身份自升级之日起至次年年底有效。</div>
						</div>
					</div>
					<div class="line "><img src=" "
						 alt="line " title="line "></div>
					<div class="text-content ">
						<h1 class="lastH1 ">升级礼遇</h1>
						<div class="lastspan ">额外获赠3,000积分及升级尊享礼。</div>
						<h1 class="lastH1 ">积分累计规则</h1>
						<div class="lastspan ">消费1元积1.3分，累计满18,000起，可参与积分兑换。积分每年年底到期清零。</div>
						<h1 class="lastH1 ">生日礼遇</h1>
						<div class="lastspan ">生日月首单购买享双倍积分，还可到店领取我们为您精心准备的至奢臻爱礼。</div>
						<h1 class="lastH1 ">专属礼遇</h1>
						<div class="lastspan ">新品优先体验，获邀参与品牌美颜会。</div>
						<div class="lastspan firstTip">*新会员入会当月无生日双倍积分礼遇。</div>
						<div class="lastspan ">*会员制度如有修订、更新，以品牌公布的修订后内容为准。</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		</div>
		<script type="text/javascript" src="hotcss.ab0ace55.js"></script>
		<script type="text/javascript" src="vendor.ab0ace55.js"></script>
		<script type="text/javascript" src="style.ab0ace55.js"></script>
		<script type="text/javascript" src="index.ab0ace55.js"></script>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="swiper/js/swiper.min.js"></script>
		<script type="text/javascript" src="swiper/js/swiper.animate.min.js"></script>
		<script>
			let swiper = new Swiper('.swiper-container', {
				direction: 'vertical',
				loop: false,
				mode:'vertical',
				freeMode: false,
				touchRatio: 0.5,
				resistance: 10%,
				longSwipesRatio: 0.1,
				threshold: 50,
				followFinger: false,
				observer: true, //修改swiper自己或子元素时，自动初始化swiper  
				observeParents: true //修改swiper的父元素时，自动初始化swiper  
			});
			let startScroll, touchStart, touchCurrent;
			swiper.slides.on('touchstart', function(e) {
				startScroll = this.scrollTop;
				touchStart = e.targetTouches[0].pageY;
			}, true);
			swiper.slides.on('touchmove', function(e) {
				touchCurrent = e.targetTouches[0].pageY;
				let touchesDiff = touchCurrent - touchStart;
				let self = this;
				let onlyScrolling =
					(self.scrollHeight > self.offsetHeight) && // allow only when slide is scrollable
					(
						(touchesDiff < 0 && startScroll === 0) || // start from top edge to scroll bottom
						(touchesDiff > 0 && startScroll === (self.scrollHeight - self.offsetHeight)) || // start from bottom edge to scroll top
						(startScroll > 0 && startScroll < (self.scrollHeight - self.offsetHeight)) // start from the middle
					);
				if (onlyScrolling) {
					e.stopPropagation();
				}
			}, true);
			$('.arrow').click(function() {
				swiper.slideNext();
			});
		</script>
		</body>
</html>
